<template>
    <div class="flex-container" style="margin-top: 5vh; margin-right: 1%">
        <div style="width: 20vw; margin-left: 50vw;">
            <el-form-item style="font-size: large;" label="类别：">
            <el-select placeholder="请选择" v-model="type">
              <el-option v-for="type in goodsTypeListData" :label="type.name" :value="type.id" :key="type.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="margin-left: 20vw;">
            <el-button type="primary" @click="find()">检索</el-button>
        </div>
        
        
    </div>

   <div  style="display: flex; width: 100%;" class="flex flex-wrap gap-4">
            <el-card v-for="chart in charts" :key="chart.id"   style="width: 30%; margin-right: 1%; margin-left: 1%;" shadow="hover">
                <div style="width: 30vw;" >
                    <div style="display: flex;">
                        <div style=" width: 12vw; height: 30vh; ">
                            <img style="width: 12vw; height: 28vh; border-radius:10%" :src="chart.photo" alt="">
                        </div>
                        <div style=" margin-left: 2vw; width: 15vw; height: 11vw; margin-bottom: 1vh; ">
                            <h3 style="font-family: 楷体; font-weight: 600;">{{ chart.name }}</h3>
                            <h4 style="font-family: 楷体; font-weight: 600;">{{ TypeListData[chart.type] }}</h4>
                            <h5 style="font-family: 楷体; font-weight: 600;">剩余数量{{ chart.number }}</h5>
                            <div style="height: 7vh;">

                            </div>
                            <el-button style="margin-left: 1vw;" type="success" @click="add(chart.id)">借书</el-button>
                        </div>
                        
                    </div>     
                </div>  
            </el-card>
        </div>
    <div style="height: 5vh;">

    </div>
</template>

<script>
import $ from "jquery";
import { ref } from "vue";
import { useStore } from "vuex";
export default {
    setup(){
        let store = useStore();
        let charts = ref([]);
        let type = ref({});
        const TypeListData = ref([
              " ","计算机类","科学类","数学类"
          ])
          const goodsTypeListData = ref([
              { id:1,name:"计算机类"},{id:2,name:"科学类"},{id:3,name:"数学类"}
          ])
        const info =()=>{
            $.ajax({
                url:"http://localhost:3000/api/book/info/",
                type:"get",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },
                success(resp){
                    charts.value = resp;
                    console.log(charts)                  
                }
                })
        }
        info()

        const find =()=>{
            $.ajax({
                url:"http://localhost:3000/api/book/gettype/",
                type:"post",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },
                data:{
                      type:type.value
                    },
                success(resp){
                    charts.value = resp;
                    console.log(charts)                  
                }
                })
        }

        const add=(id)=>{
            $.ajax({
                url:"http://localhost:3000/api/request/add/",
                type:"post",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },
                data:{
                      id:id
                    },
                success(resp){               
                    console.log(resp)
                    info()
                }
                })
        }
        return{
            charts,
            goodsTypeListData,
            TypeListData,
            type,
            find,
            add
        }
    }
}
</script>


<style scoped>
.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 8px; /* 元素之间的间距 */
}
</style>